<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>frame组件Dome</title>
	<style>
		.fc-files { display: inline-block; width: 58px; height: 58px; text-align: center; line-height: 60px; border: 1px solid transparent; border-radius: 4px; overflow: hidden; background: #fff; position: relative; box-shadow: 0 1px 1px rgba(0,0,0,.2); margin-right: 4px; box-sizing: border-box; }
		.fc-files img { width: 100%; height: 100%; display: block;}
		.fc-files.on{background: #40d0c3;  padding: 1px;}
	</style>
</head>
<body>
<div class="fc-files"><img src="http://www.jq22.com/img/cs/500x500-1.png"></div>
<div class="fc-files"><img src="http://www.jq22.com/img/cs/500x500-2.png"></div>
<div class="fc-files"><img src="http://www.jq22.com/img/cs/500x500-3.png"></div>
<div class="fc-files"><img src="http://www.jq22.com/img/cs/500x500-4.png"></div>
<div class="fc-files"><img src="http://www.jq22.com/img/cs/500x500-5.png"></div>
<div class="fc-files"><img src="http://www.jq22.com/img/cs/500x500-6.png"></div>
<button id="closeBtn">关闭页面</button>
<button onclick="onUnload()">立即修改</button>

<script>
	//获取fodder字段值
	var value = parent.$f.getValue('fodder'),
		images = Array.from(self.document.getElementsByTagName('img'));
	//选中对应的图片
    images.forEach(function (image) {
		if(value.indexOf(image.src) !== -1){
			image.parentNode.classList.add('on');
		}else{
            image.parentNode.classList.remove('on');
		}
		image.addEventListener('click',onClick)
    });

    function onClick() {
        var parent = this.parentNode;
        if(Array.from(parent.classList).indexOf('on') !== -1) {
            parent.classList.remove('on');
        }else{
            parent.classList.add('on');
        }
    }

    document.getElementById('closeBtn').addEventListener('click',function(){
        //手动关闭frame弹出框
        parent.$f.closeModal();
    });

	window.onunload = onUnload;

	//当页面关闭时更新frame字段的值
	function onUnload() {
        var list = [];
        images.forEach(function (image) {
	        if(Array.from(image.parentNode.classList).indexOf('on') !== -1){
				list.push(image.src);
	        }
        });

        //修改表单fodder字段的值
		parent.$f.changeField('fodder',list);
    }
</script>
</body>
</html>
